<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>角色管理</title>
		<script src="../static/babel/6.26.0/polyfill.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/axios/0.17.1/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/vue/2.5.13/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/element-ui/2.1.0/index.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../static/element-ui/2.1.0/index.css" />
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/hou-tai.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/hou-tai.css" />
	</head>

	<body>
		<div id="app">
			<hou-tai>
				<div style="width: 90%; margin: auto;">
					<el-row type="flex" justify="space-around" align="middle">
						<el-col align="right">
							<el-button type="success" icon="el-icon-plus" @click="dialogAddRoleVisible = true">新增角色</el-button>
						</el-col>
					</el-row>
					<br />
					<el-row type="flex" justify="space-around" align="middle">
						<el-col :span="6">
							<el-card class="list">
								<div v-for="role in roles" class="item" @click="selectRole(role)">
									{{role.description}}
								</div>
							</el-card>
						</el-col>
						<el-col :span="15" align="center">
							<el-card class="edit">
								<el-row type="flex" justify="space-between" align="middle">
									<el-col :span="3">
										角色名称：
									</el-col>
									<el-col :span="6">
										<el-input v-model="role.name" :disabled="true"></el-input>
									</el-col>
									<el-col :span="3">
									</el-col>
									<el-col :span="3">
										角色描述：
									</el-col>
									<el-col :span="6">
										<el-input v-model="role.description"></el-input>
									</el-col>
									<el-col :span="3">
										<el-button size="mini" type="success" icon="el-icon-check" round @click="updateDescription()"></el-button>
									</el-col>
								</el-row>
								<br />
								<el-transfer v-model="hasAuthority" :data="authorityData" :titles="['未拥有权限', '已拥有权限']"></el-transfer>
								<br />
								<el-button type="danger" @click="deleteRole()">删除</el-button>
								<el-button type="primary" @click="saveRole()">保存</el-button>
							</el-card>
						</el-col>
					</el-row>
					<el-dialog title="新增角色" :visible.sync="dialogAddRoleVisible" width="400px" @keyup.enter.native="submitAddRoleForm('addRole')">
						<el-form :rules="addRoleRules" :model="addRole" ref="addRole" label-width="80px">
							<el-form-item label="角色名称" prop="name">
								<el-input v-model="addRole.name" placeholder="请输入角色名称"></el-input>
							</el-form-item>
							<el-form-item label="描述" prop="description">
								<el-input v-model="addRole.description" placeholder="请输入描述"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button @click="resetForm('addRole')">重置</el-button>
								<el-button type="primary" @click="submitAddRoleForm('addRole')">确定</el-button>
							</el-form-item>
						</el-form>
					</el-dialog>
				</div>
			</hou-tai>
		</div>
		<script src="js/role.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/role.css" />
	</body>

</html>